<template>
  <div>
    <base-header type="gradient-success" class="pb-6 pb-8 pt-5 pt-md-7"></base-header>
    <notifications></notifications>
    <div class="container-fluid mt--7">
      <div class="card shadow">
        <card type="frame">添加活动广告</card>
        <div class="card-header border-0">
          <div>
            <div class="form-group row">
              <label
                for="example-search-input"
                class="col-md-2 col-form-label form-control-label"
              >广告标题</label>
              <div class="col-md-10">
                <base-input placeholder="请输入标题" v-model="model.title"></base-input>
              </div>
            </div>

            <div class="form-group row">
              <label
                for="example-search-input"
                class="col-md-2 col-form-label form-control-label"
              >广告类型</label>
              <div class="col-md-10">
                <base-radio name="1" class="mb-3" v-model="model.type">图片</base-radio>
                <base-radio name="2" class="mb-3" v-model="model.type">网页</base-radio>
                <base-radio name="3" class="mb-3" v-model="model.type">小程序内跳转[跳转活动]</base-radio>
              </div>
            </div>
            <div class="form-group row">
              <label
                for="example-search-input"
                class="col-md-2 col-form-label form-control-label"
              >广告跳转地址</label>
              <div class="col-md-10">
                <base-input placeholder="请输入广告跳转地址" v-model="model.href"></base-input>
              </div>
            </div>

            <div class="form-group row">
              <label
                for="example-search-input"
                class="col-md-2 col-form-label form-control-label"
              >广告图片预览</label>
              
              <div class="col-md-10">
                <img style="width:400px" v-bind:src="model.mainimg" />
              </div>
            </div>

            <div class="form-group row">
              <label
                for="example-search-input"
                class="col-md-2 col-form-label form-control-label"
              >广告图片上传</label>
              
              <div class="col-md-10">
                <vue-file-upload
                  ref="vueFileUploader"
                  :url="uploadUrl"
                  class="fileupload-button"
                  :auto-upload="true"
                  :events="cbEvents"
                  :filters="filters"
                  :request-options="reqopts"
                  @onAdd="onAddItem"
                />
              </div>
            </div>

            <div class="form-group row">
              <label
                for="example-search-input"
                class="col-md-2 col-form-label form-control-label"
              >位置代码</label>
              <div class="col-md-10">
                <base-input placeholder="请输入位置代码" v-model="model.code"></base-input>
              </div>
            </div>

            <div class="form-group row" v-show="showSaveBtn">
              <label for="example-time-input" class="col-md-2 col-form-label form-control-label"></label>
              <div class="col-md-10">
                <base-button type="success" @click="save()">
                  <i class="ni ni-send"></i>提交
                </base-button>
              </div>
            </div>
            <div class="form-group row" v-show="showUpdateBtn">
              <label for="example-time-input" class="col-md-2 col-form-label form-control-label"></label>
              <div class="col-md-10">
                <base-button type="success" @click="update()">
                  <i class="ni ni-send"></i>更新
                </base-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import VueFileUpload from 'vue-file-upload'
import validate from "~/config/utils/validate";
import { findAdvByIdApi } from "~/config/api/ldadvservice";
import { saveAdvApi } from "~/config/api/ldadvservice";
import { updateAdvApi } from "~/config/api/ldadvservice";
import config from '@/config'
export default {
  asyncData() {},
  components: {
    VueFileUpload
  },
  head: {
    title: "添加广告"
  },
  name: "tables",
  data() {
    return {
      showSaveBtn: false,
      showUpdateBtn: false,
      uploadUrl:config.UPLOAD_ADV_URL,
      model: {
        id: "",
        type: "2",
        href: "",
        mainimg: "",
        code: ""
      },
      files: [], // 图片文件集合
      filters: [
        {
          name: 'imageFilter',
          fn(file) {
            var type =
              '|' + file.type.slice(file.type.lastIndexOf('/') + 1) + '|'
            return '|jpg|png|jpeg|bmp|gif|'.indexOf(type) !== -1
          }
        }
      ],
      cbEvents: {
        onCompleteUpload: (file, response, status, header) => {
          this.model.mainimg=response.fileUrl
        },
        onAddFileSuccess: file => {},
        onProgressUpload: (file, progress) => {}
      },
      reqopts: {
        formData: {
          tokens: "",
          authorization: ""
        },
        responseType: "json",
        withCredentials: false,
        headers: {
          custormerHeader: ""
        }
      }
    };
  },
  created: function() {
    let pageaction = this.$route.query.action;
    if (pageaction == "save") {
      this.showSaveBtn = true;
    }
    if (pageaction == "edit") {
      this.showUpdateBtn = true;
      let id = this.$route.query.id;
      this.findAdvById(id);
    }
  },
 mounted: function() {
    this.$refs.vueFileUploader.setFormDataItem("authorization", "");
  },
  methods: {
    onStatus(file) {
      if (file.isSuccess) {
        return '上传成功'
      } else if (file.isError) {
        return '上传失败'
      } else if (file.isUploading) {
        return '正在上传'
      } else {
        return '待上传'
      }
    },
    onPreview(file) {
      if ('URL' in window) {
        var src = window.URL.createObjectURL(file.file)
        return src
      }
    },
    onAddItem(files) {
      this.files = files
    },

    async findAdvById(id) {
      let params = {
        id: id
      };
      await findAdvByIdApi(params).then(res => {
        if (res.sucflag) {
          this.model.title = res.bean.title;
          this.model.type=res.bean.type;
          this.model.href=res.bean.href;
          this.model.code=res.bean.code;
          this.model.mainimg=res.bean.mainimg;
          this.model.id = res.bean.id;
        }
      });
    },

    async save() {
      let params = {
        title: this.model.title,
        type: this.model.type,
        code: this.model.code,
        mainimg:this.model.mainimg,
        href:this.model.href
      };
      await saveAdvApi(params).then(res => {
        if (res.sucflag) {
          this.$notify({
            type: "info",
            verticalAlign: "top",
            horizontalAlign: "center",
            message: "添加成功"
          });
          this.$router.push("/ldadv/ldadvlist");
        }
      });
    },
    async update() {
      let params = {
        id: this.model.id,
        title: this.model.title,
        type: this.model.type,
        code: this.model.code,
        mainimg:this.model.mainimg,
        href:this.model.href
      };
      await updateAdvApi(params).then(res => {
        if (res.sucflag) {
          this.$router.push("/ldadv/ldadvlist");
        }
      });
    }
  },
  layout: "DashboardLayout"
};
</script>
<style></style>
